$(function() {
    //本地存储
    localStorage.setItem("department", JSON.stringify(department1));
    let department = JSON.parse(localStorage.getItem("department"));
    //动态生成表格高度
    let html = "";
    let pageNo = 1; //当前页
    init(pageNo, department);

    function init(pageNo) {
        let tableHeight = document.getElementById("content");
        tableHeight.style.height = department.length * 30 + 40 + "px"; //30:数据的高度 40：thead高度
        $(".pages").html("");
        let pageSize = 5;
        let pageTotal = Math.ceil(department.length / 5) //最大页码
        let newDepartment = department.slice((pageNo - 1) * pageSize, (pageNo - 1) * pageSize + pageSize);
        for (let i = 1; i <= pageTotal; i++) {
            pages = `<a class="page-link code" href="#">${i}</a>`
            $(".pages").append(pages);
        };
        //删除以前的内容
        $("#tbody").html("");
        $("#page-text").html("");
        //动态生成表格
        for (let i = 0; i < newDepartment.length; i++) {
            html = `<tr>
    <td>${newDepartment[i].department_id}</td>
    <td>${newDepartment[i].department_place}</td>
    <td>${newDepartment[i].department_name}</td>
    <td>${newDepartment[i].department_tel}</td>
    <td>${newDepartment[i]. department_num}</td>
    <td><button type="button"  class="btn btn-info btn-primary xiugai" data-toggle="modal" data-target="#myModal">修改</button>
    <button type="button" class="btn btn-danger del">删除</button></td>
     </tr>`
            $("#tbody").append(html);
        }
        $("#page-text").append(`
    当前第<span style="color: #a2a2a2">${pageNo}</span>页,共<span style="color: #a2a2a2">${pageTotal}</span>页
    `);
        //跳转功能
        //点击页码出现对应的数据
        $(document).on("click", ".code", function() {
                pageNo = $(this).html();
                init(pageNo, department);
            }) //上一页和下一页
        $(document).on("click", "#pre", function() {
            if (pageNo != 1 && pageNo >= 2) {
                pageNo--;
                init(pageNo, department)
            }
        })
        $(document).on("click", "#next", function() {
            if (pageNo < pageTotal) {
                pageNo++;
                init(pageNo, department)
            }
        })
    }
    //修改
    $(document).on("click", ".xiugai", function() {
        //获取和按钮同一排的文本内容
        let department_name
        let department_place
        let department_num
        let department_tel
        let department_id = $(this).parent().parent().children().eq(0).html();
        // console.log(Work_id);
        // console.log(Work_data.length);
        for (let i = 0; i < department.length; i++) {
            if (department_id == department[i].department_id) {
                department_name = department[i].department_name
                department_place = department[i].department_place
                department_num = department[i].department_num
                department_tel = department[i].department_tel
            }
        }
        //属性选择器
        $("input[name='department_id']").val(department_id)
        $("input[name = 'department_place']").val(department_place)
        $("input[name = 'department_name']").val(department_name)
        $("input[name = 'department_tel']").val(department_tel)
        $("input[name = 'department_num']").val(department_num);



    });
    $(".queding").click(function() {

            let valId = parseInt($(".addVal").eq(0).val());
            let valName = $(".addVal").eq(1).val()
            let valPlace = $(".addVal").eq(2).val()
            let valTel = $(".addVal").eq(3).val()
            let valNum = $(".addVal").eq(4).val()

            // //设置一个新的数组
            // let xin = JSON.parse(localStorage.getItem("department"));
            for (let i = 0; i < department.length; i++) {
                if (department[i].department_id == valId) {
                    department[i] = {
                        "department_id": valId,
                        "department_name": valName,
                        "department_place": valPlace,
                        "department_tel": valTel,
                        "department_num": valNum,
                    }
                }
            }
            init(pageNo, department);

        })
        //删除
    $(document).on("click", ".del", function() {
        let department_id = $(this).parent().parent().children().eq(0).html();
        for (let i = 0; i < department.length; i++) {
            if (department_id == department[i].department_id) {
                department.splice(i, 1)
            }
        }
        init(pageNo, department);
    })

    //添加
    //添加 
    let add = {};
    let department_id;

    $(document).on("click", ".addTo", function() {
        //点击添加会自动获取id
        department_id = department.length + 1;
        //显示id值
        $("input[name ='new department_id']").val(department_id)

        console.log($("input[name ='valdepartment_id']"));
        //确定之后获取输入的每个选项的值
    });

    $('body').on("click", ".determine", function() {
        //添加后清空对象

        add = {};
        let Id = $(".val").eq(0).val();
        let Name = $(".val").eq(1).val()
        let Place = $(".val").eq(2).val()
        let Tel = $(".val").eq(3).val()
        let Num = $(".val").eq(4).val()
            //把输入的值放进对象里
        add = {
            "department_id": Id,
            "department_name": Name,
            "department_place": Place,
            "department_tel": Tel,
            "department_num": Num,
        };
        //把对象添加进数组里面
        department.push(add);
        // pageNum = Math.ceil(Work_data.length / 5); //页数
        init(pageNo, department);

    })




})